<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>投放渠道</span>
    </div>
    <div class="clearfix mb15">
      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"/>
    </div>
    <!--<v-tableBtns-->
    <!--:table-title="exportTitle"-->
    <!--:table-data="exportData"-->
    <!--:show-create="true"-->
    <!--@addNew="addNew"-->
    <!--/>-->

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :default-operate="false"
      :deleteable="false"
      :editable="false"
      btn-class="btn"
      @sortChange="sortChange"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Home',
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        // 排序
        sidx: '',
        sortKey: null,
        formTitle: [
          {
            cn: '渠道: ',
            en: 'chnl_name'
          },
          {
            cn: '公司: ',
            en: 'corp_name'
          }
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: '渠道',
            en: 'launch_channel'
          },
          {
            cn: '总消耗',
            en: 'total_cost',
            sortable: true
          },
          {
            cn: '预估收益',
            en: 'income',
            sortable: true
          },
          {
            cn: '实收比例',
            en: 'act_rate',
            sortable: true
          },
          {
            cn: '实际收益',
            en: 'act_income',
            sortable: true
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
            sortable: true
          },
          {
            cn: '近7日日均回收',
            en: 'daily_income',
            sortable: true
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
            sortable: true
          },
          {
            cn: '公司',
            en: 'launch_corp'
          }
        ],
        tableData: [],
        exportTitle: [],
        exportData: []

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.startDate = origin[key][0]
            data.endDate = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList(data) {
        const loading = this.$loading()

        let datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey
        }

        this.$get('action/TaoLaunchChannelInfo/dataGrid', datas)
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
                item.recovery_rate = (item.recovery_rate ? (item.recovery_rate * 100).toFixed(2) : 0) + '%'
                return item
              })
            }
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow

            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },

      // 搜索
      search() {
        this.getTableList()
      },

      reset() {
        this.filter_info = {}
        this.getTableList()
      },
      addNew() {
        // 跳转到创建页面
        this.$router.push({
          name: 'invoice_info.modify'
        })
      },
      edit(val) {
        this.$router.push({
          name: 'invoice_info.modify',
          query: {
            id: val.row.id
          },
          params: {
            details: val.row
          }
        })
      },
      onDelete(val) {
        const data = { id: val.row.id }
        this.$post('action/InvoiceInformation/del', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },

      // 排序
      sortChange({ column, prop, order }) {
        console.log(column, prop, order)
        this.sidx = prop || ''
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    }
  }
</script>
